<!-- <!DOCTYPE html> -->
<html lang="en">

<head>
  <meta charset="UTF-8">
  <!-- 使用UTF-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
    content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <!-- 设置移动终端可视区域 -->
  <meta content="telephone=no" name="format-detection">
  <!-- 禁止iPhone等手机自动将数字变成可点击的拨号连接 -->
  <title>966588服务</title>
  <link href="css/style.css" type="text/css" rel="stylesheet" />
  <link href="css/weui.css" type="text/css" rel="stylesheet" />
</head>

<body style="background: #f6f6f6;">
  <div class="index" id="containerVue" v-cloak>
    <div v-show="showBanner==1" class="headerView">
      <i onclick="closeView()">&#139;</i>
      <h1>"966588"查询系统</h1>
      <div></div>
      <div class="right" @click="choiceView">筛选</div>
    </div>
    <div v-show="showBanner==0" style="background: #fff;" class="headerView">
      <i style="color:#0787d5" onclick="closeView()">&#139;<span style="color:#0787d5;font-size: 1rem;position: relative;bottom: 0.1rem;">返回</span></i>
      <div style="color:#0787d5" class="right" @click="choiceView">筛选</div>
    </div>
    <div class="choice_tip" v-if="choice">
      <div class="choice_view">
        <div class="choice">
          <div class="name">超期节点类型</div>
          <div class="text" @click="adjustOpen"><input type="text" readonly v-model="adjustType"
              style="font-size: .9rem;" /></div>
          <div class="selectView" v-if="proType">
            <div class="ulView">
              <div class="title">超期节点类型</div>
              <div class="ul" style="height: 8.25rem;">
                <div class="li" v-for="item in adjust" :class="[item.value == param.type?'active':'']"
                  @click="causeSelect(item)">
                  <div>{{item.title}}</div>
                  <img src="./image/select.png" alt="">
                  <img src="./image/selected.png" class="check" alt="">
                </div>
              </div>
              <div class="selectbtn">
                <div @click="selectCause" style="color: #2e84db;">确定</div>
              </div>
            </div>
          </div>
        </div>
        <div class="choice">
          <div class="name">日期范围</div>
          <div class="text">
            <input type="text" style="width: 44%;" id="startTime" readonly />
            <span style="float: left;vertical-align: middle;margin: .2rem .5rem;">~</span>
            <input type="text" style="width: 45%;" id="endTime" v-model="param.endDate" readonly />
          </div>
        </div>
        <!-- <div class="choice">
          <div class="name">按月统计截止月份</div>
          <div class="text">
            <input type="text" style="width: 100%;" id="monthTime" readonly />
          </div>
        </div> -->
        <div class="choice_btn">
          <div class="btn_view" @click="choice = false">关闭</div>
          <div class="btn_view choice_btn_active" @click="search()">确定</div>
        </div>
      </div>
    </div>
    <div class="censusList">
      <!-- <select name="department" id="" class="select" v-model="param.deptCode" placeholder="">
        <option value="">全部部门</option>
        <option :value="item.code" v-for="item in departmentList">{{item.name}}</option>
      </select> -->

      <div class="search-box">
        <div class="selAll" style="width: 54%;">
          <div @click="departmentClick">{{departmentText}}</div>
          <div class="selectView" v-if="department">
            <div class="ulView">
              <div class="title">部门</div>
              <div class="ul" style="height: 8.25rem;">
                <div class="li" v-for="item in departmentList" :class="{'active': item.checked}"
                  @click="departmentSelect(item)">
                  <div>{{item.name}}</div>
                  <img src="./image/select.png" alt="">
                  <img src="./image/selected.png" class="check" alt="">
                </div>
              </div>
              <div class="selectbtn">
                <div @click="resetDepartment" style="border-right: 1px solid #ddd">重置</div>
                <div @click="selectDepartment" style="color: #2e84db;">确定</div>
              </div>
            </div>
          </div>
        </div>
        <div class="departmentStatus" style="width: 20%;">
          <select name="natureCode" id="" class="select" v-model="param.nature" placeholder="">
            <option value="">全部</option>
            <option value="现状">现状</option>
            <option value="放线">放线</option>
            <option value="竣工">竣工</option>
          </select>
        </div>
        <div class="departmentStatus" style="width: 20%;">
          <select name="departmentCode" id="" class="select" v-model="param.overDateType" placeholder="">
            <option value="0">全部</option>
            <option value="1">进行中</option>
            <option value="2">已完成</option>
          </select>
        </div>
      </div>
      <div class="box">
        <div class="list" :class="item.isChecked?'':'listActive'" v-for="(item,index) in statisticsList">
          <div class="title" @click="changeList(item,index)">
            <div v-if="index == 0">
              <div>{{item.name}}&nbsp;&nbsp;({{statisticsInfo.totalOverDateNum}}个/{{statisticsInfo.totalNum}}个)</div>
            </div>
            <div v-if="index == 1">
              <div>{{item.name}}&nbsp;&nbsp;({{statisticsInfo.totalOverDateNum}}个/{{statisticsInfo.totalNum}}个)</div>
            </div>
            <div v-if="index == 2">
              <div>{{item.name}}</div>
            </div>
            <img src="./image/back.png" alt="" class="arrow">
          </div>
          <div class="content" style="margin-bottom: 0;">
            <div v-if='index == 0'>
              <div :id="'main'+index" style="width: 14.5rem;height: 18rem;"></div>
            </div>
            <div v-if='index == 1'>
              <div :id="'main'+index" style="width: 14.5rem;height: 18rem;"></div>
            </div>
            <div v-if='index == 2'>
              <div :id="'main'+index" style="width: 14.5rem;height: 20rem;"></div>
            </div>
            <div class="text">注:按部门实时统计</div>
          </div>
        </div>
      </div>
    </div>
    <!-- loading 加载 -->
    <div style="opacity: 1;" v-if="loading">
      <div class="weui-mask_transparent"></div>
      <div class="weui-toast">
        <img src="image/load.gif" alt="" style="width: 2rem;margin: 2rem auto .5rem;">
        <p class="weui-toast__content">加载中</p>
      </div>
    </div>
  </div>
  <script src="script/jquery-3.5.js"></script>
  <script src="script/vue.js"></script>
  <script src="script/api.js"></script>
  <script src="script/ajax.js"></script>
  <script src="script/echarts.min.js"></script>
  <script src="script/laydate/laydate.js"></script>
  <script>
    var app = new Vue({
      el: '#containerVue',
      data: {
        param: {
          startDate: "",
          endDate: "",
          type: "-1",
          nature: "",
          deptCode: "",
          overDateType: '0'
        }, // 搜索条件
        endParam: {
          endDate: new Date().getFullYear() + '-' + ((new Date().getMonth() + 1) < 10 ? '0' + (new Date().getMonth() + 1) : (new Date().getMonth() + 1)) + '-' + (new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()),
          deptCode: "",
          overDateType: '0'
        },
        choice: false, // 筛选条件
        proType: false,
        adjust: [{
          title: '全部超期',
          value: -1
        }, {
          title: '项目超期个数',
          value: 0
        }, {
          title: '项目个数超期率',
          value: 1
        }, {
          title: '项目时间超期率',
          value: 2
        }],
        adjustType: '',
        loading: false,
        statisticsInfo: {},
        statisticsMonthInfo: {},
        statisticsList: [],
        statisticsMonthList: [],
        departmentList: [],

        department: false,
        departmentText: "选择部门",
        showBanner:0,
      },
      created() {

      },
      mounted() {
        this.getDepartment();
        if (this.GetQueryString("overdu") == null) {
          this.param.deptCode = "";
          this.getStatistics();
        } else {
          this.param.deptCode = this.GetQueryString("overdu");
          this.getStatistics();
        }
      },
      watch: {
        'param.nature': function (val, oldval) {
          this.getStatistics();
        },
        'param.overDateType': function (val, oldval) {
          this.getStatistics();
        },
      },
      methods: {
        backView() {
          window.history.go(-1);
        },
        GetQueryString(name) {
          var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
          var r = window.location.search.substr(1).match(reg);
          if (r != null) return unescape(r[2]); return null;
        },
        departmentClick() {
          this.department = true;
        },
        departmentSelect(item) {
          item.checked = !item.checked
        },
        resetDepartment() {
          this.department = false;
          this.param.deptCode = '';
          this.departmentText = '选择部门';
          this.departmentList.forEach((item, index) => {
            item.checked = false;
          })
          this.getStatistics();
        },
        selectDepartment() {
          this.department = false;
          let paramDeptCode = []
          this.departmentList.forEach((item, index) => {
            if (item.checked == true) {
              paramDeptCode.push(item.code)
            }
          })
          if (paramDeptCode.length > 0) {
            this.departmentText = `已选择${paramDeptCode.length}个部门`
          } else {
            this.departmentText = '选择部门'
          }
          let str = paramDeptCode.join(',')
          this.param.deptCode = str;
          this.getStatistics();
        },
        selectCause() {
          this.proType = false;
        },
        causeSelect(e) {
          this.param.type = e.value;
          this.adjustType = e.title;
        },
        adjustOpen() {
          this.proType = true;
        },
        // 筛选功能
        search() {
          document.body.scrollTop = 0;
          this.choice = false;
          this.getStatistics();
        },
        // 日期筛选
        choiceView() {
          this.choice = true;
          setTimeout(function () {
            laydate.render({
              elem: "#startTime", //指定元素
              type: 'date',
              format: 'yyyy-MM-dd',
              trigger: 'click',
              showBottom: false,
              theme: '#0787d5',
              done: function (value, date, endDate) {
                app.param.startDate = value;
              }
            });
            laydate.render({
              elem: "#endTime", //指定元素
              type: 'date',
              format: 'yyyy-MM-dd',
              trigger: 'click',
              showBottom: false,
              theme: '#0787d5',
              done: function (value, date, endDate) {
                app.param.endDate = value;
              }
            });
            laydate.render({
              elem: "#monthTime",
              type: 'month',
              trigger: 'click',
              showBottom: true,
              theme: '#0787d5',
              done: function (value, date, endDate) {
                console.log(value);
                app.endParam.endDate = value + "-31";
              }
            })
          }, 5 * 100);
        },
        changeList(item, i) {
          if (i < 3) {
            this.statisticsList.forEach((element, index) => {
              if (index == i) {
                element.isChecked = !element.isChecked
              }
            });
          } else {
            this.statisticsMonthList.forEach((element, index) => {
              if (index + 3 == i) {
                element.isChecked = !element.isChecked
              }
            });
          }
        },
        getEchart(i, nameType) {
          var myChart = echarts.init(document.getElementById('main' + i)), names = new Array(),datas = new Array();
          let _this = this;
          // 指定图表的配置项和数据
          if (i == 0) {
            names = this.statisticsInfo.newDeptList
            datas = [
              {
                name: '',
                type: 'bar',
                data: this.statisticsList[i].dataList,
                label: {
                  normal: {
                    show: true,
                    position: 'right',
                    color: '#333',
                    formatter: function (params) {
                      let name = nameType.indexOf('率')
                      if (name !== -1) {
                        return (params.value * 100).toFixed(2) + '%';
                      } else {
                        return params.value + '个';
                      }
                    }
                  }
                },
                barWidth: "15", //柱子宽度
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#008cff'
                    }, {
                      offset: 1,
                      color: '#005193'
                    }]),
                    opacity: 1,
                  }
                }
              }
            ]
          } else if (i == 1) {
            names = this.statisticsInfo.newDeptList
            datas = [
              {
                name: '',
                type: 'bar',
                data: this.statisticsList[i].dataList,
                label: {
                  normal: {
                    show: true,
                    position: 'right',
                    color: '#333',
                    formatter: function (params) {
                      let name = nameType.indexOf('率')
                      if (name !== -1) {
                        return (params.value * 100).toFixed(2) + '%';
                      } else {
                        return params.value + '个';
                      }
                    }
                  }
                },
                barWidth: "15", //柱子宽度
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#008cff'
                    }, {
                      offset: 1,
                      color: '#005193'
                    }]),
                    opacity: 1,
                  }
                }
              }
            ]
          } else if (i == 2) {
            names = this.statisticsInfo.newDeptList1
            datas = [
              {
                name: '实际工期',
                type: 'bar',
                data: this.statisticsList[i].avaRealDayList,
                label: {
                  normal: {
                    show: true,
                    position: 'right',
                    color: '#333',
                    formatter: function (params) {
                      return params.value.toFixed(2) + '天';
                    }
                  }
                },
                barWidth: "12",
                // barGap: 1,
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#3EE556'
                    }, {
                      offset: 1,
                      color: '#3EAC4E'
                    }]),
                    opacity: 1,
                  }
                }
              },
              {
                name: '预计工期',
                type: 'bar',
                data: this.statisticsList[i].avaPlanDayList,
                label: {
                  normal: {
                    show: true,
                    position: 'right',
                    color: '#333',
                    formatter: function (params) {
                      return (params.value).toFixed(2) + '天';
                    }
                  }
                },
                barWidth: "12", //柱子宽度
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#008cff'
                    }, {
                      offset: 1,
                      color: '#005193'
                    }]),
                    opacity: 1,
                  }
                }
              }
            ]
          }
          var option = {
            backgroundColor: 'rgba(0,0,0,0)',
            tooltip: {
              show: true,
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              formatter: function (params) {
                let name = nameType.indexOf('率'), str = "";
                if (name !== -1) {
                  if (i == 1) {
                    str = `<div>${params[0].axisValueLabel}<br/>${(params[0].value * 100).toFixed(2)}%</div>`
                  } else if (i == 2) {
                    str = `<div>${params[0].seriesName}<br/>${(params[0].value).toFixed(2)}天</div>
                    <div>${params[1].seriesName}<br/>${(params[1].value).toFixed(2)}天</div>`
                  }
                } else {
                  str = `<div>${params[0].axisValueLabel}<br/>${params[0].value}个</div>`
                }
                return str
              }
            },
            // legend: {
            //   data: ['接入率', '在线率', '完好率'],
            //   align: 'right',
            //   right: 10,
            //   textStyle: {
            //     color: "#fff"
            //   },
            //   itemWidth: 10,
            //   itemHeight: 10,
            //   itemGap: 35
            // },
            grid: {
              top: "5%",
              left: '30%',
              right: '20%',
              bottom: '5%',
              // containLabel: true
            },
            xAxis: [{
              type: 'value',
              axisLabel: {
                formatter: ''
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: "#999",
                  width: 1,
                  type: "solid"
                },
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: "#999",
                }
              }
            }],
            yAxis: [{
              type: 'category',
              data: names,
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#999",
                  width: 1,
                  type: "solid"
                }
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#999",
                },
                interval: 0,
                formatter: function (value) {
                  let val = ''
                  let valLength = value.indexOf("（")
                  if (i == 0) {
                    val = value.substr(0, valLength) + '\n{a|' + value.substr(valLength, value.length) + '}'
                  } else if (i == 1) {
                    val = value.substr(0, valLength) + '\n{a|' + value.substr(valLength, value.length) + '}'
                  } else if (i == 2) {
                    val = value.substr(0, valLength) + '\n{a|' + value.substr(valLength, value.length) + '}'
                  }
                  return val
                },
                rich: {
                  a: {
                      color: '#fe6762',
                  },
                }
              },
            }],
            series: datas
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
          //下转点击事件
          myChart.on('click', function(params) {
            let valLength = params.name.indexOf("（")
            let deptName = params.name.substr(0, valLength)
            sessionStorage.setItem('deptName',deptName)
            window.location.href = './censusOverdueChartList.html?deptName=' + encodeURI(encodeURI(deptName)) + '&startDate=' + _this.param.startDate + '&endDate=' + _this.param.endDate+ '&nature=' + encodeURI(encodeURI(_this.param.nature)) + '&overDateType=' + _this.param.overDateType+ '&type=' + _this.param.type;
          })
        },
        getMonthEchart(i, nameType) {
          var myChart = echarts.init(document.getElementById('month' + i)), names = this.statisticsMonthInfo.monthList, datas = this.statisticsMonthList[i].dataList;
          // 指定图表的配置项和数据
          var option = {
            backgroundColor: 'rgba(0,0,0,0)',
            tooltip: {
              show: true,
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              formatter: function (params) {
                let name = nameType.indexOf('率'), str = "";
                if (name !== -1) {
                  if (i == 2) {
                    str = `<div>${params[0].axisValueLabel}<br/>${params[0].value}个</div>`
                  } else {
                    str = `<div>${params[0].axisValueLabel}<br/>${(params[0].value * 100).toFixed(2)}%</div>`
                  }
                } else {
                  str = `<div>${params[0].axisValueLabel}<br/>${params[0].value}个</div>`
                }
                return str
              }
            },
            grid: {
              top: "5%",
              left: '25%',
              right: '20%',
              bottom: '5%',
            },
            xAxis: [{
              type: 'value',
              axisLabel: {
                formatter: ''
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: "#999",
                  width: 1,
                  type: "solid"
                },
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: "#999",
                }
              }
            }],
            yAxis: [{
              type: 'category',
              data: names,
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#999",
                  width: 1,
                  type: "solid"
                }
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#999",
                }
              },
            }],
            series: [{
              name: '',
              type: 'bar',
              data: datas,
              label: {
                normal: {
                  show: true,
                  position: 'right',
                  color: '#333',
                  formatter: function (params) {
                    let name = nameType.indexOf('率')
                    if (name !== -1) {
                      return (params.value * 100).toFixed(2) + '%';
                    } else {
                      return params.value + '个';
                    }
                  }
                }
              },
              barWidth: "15", //柱子宽度
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#008cff'
                  }, {
                    offset: 1,
                    color: '#005193'
                  }]),
                  opacity: 1,
                }
              }
            }]
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        },
        // 获取部门列表
        getDepartment() {
          var that = this;
          ajaxHttp({
            url: 'jeecg-boot/sys/sysDepart/queryGhhsDeptList',
            type: 'post',
            data: {},
            beforeSend: function () {
              that.loading = true
            },
            success: function (res) {
              if (res.success) {
                res.result.forEach(item => {
                  item.checked = false;
                })
                that.departmentList = res.result
              } else {
                $.Jwarning(res.message)
              }
            },
            complete: function () {
              that.loading = false
            },
            error: function (err) {
              console.log(err);
            }
          });
        },
        // 获取统计信息
        getStatistics() {
          this.showBanner=localStorage.getItem("showBanner");
          var that = this;
          ajaxHttp({
            url: 'jeecg-boot/node/nodeProjectInfo/getOverdateCountChart',
            type: 'post',
            data: this.param,
            beforeSend: function () {
              that.loading = true
            },
            success: function (res) {
              // console.log(res);
              if (res.success) {
                that.statisticsInfo = res.result;
                that.statisticsList = res.result.tabList;
                that.statisticsList.forEach((item, index) => {
                  setTimeout(() => {
                    that.getEchart(index, item.name);
                  }, 800);
                })

              } else {
                $.Jwarning(res.message)
              }
            },
            complete: function () {
              that.loading = false
            },
            error: function (err) {
              console.log(err);
            }
          });
        },
        // 获取统计信息
        getByMonth() {
          var that = this;
          ajaxHttp({
            url: 'jeecg-boot/node/nodeProjectInfo/getOverdateCountByMonth',
            type: 'post',
            data: this.endParam,
            beforeSend: function () {
              that.loading = true
            },
            success: function (res) {
              console.log(res);
              if (res.success) {
                that.statisticsMonthInfo = res.result;
                that.statisticsMonthList = res.result.tabList
                that.statisticsMonthList.forEach((item, index) => {
                  setTimeout(() => {
                    that.getMonthEchart(index, item.name);
                  }, 800);
                })
              } else {
                $.Jwarning(res.message)
              }
            },
            complete: function () {
              that.loading = false
            },
            error: function (err) {
              console.log(err);
            }
          });
        },
      }
    })
  </script>
</body>

</html>